/* 统一卡片样式定义 */

/* 基础卡片样式 - glass-card */
.glass-card {
  background: var(--app-gradient-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--app-border-color);
  box-shadow: var(--app-shadow-light);
  border-radius: var(--app-radius-sm);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.glass-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: calc(var(--app-radius-sm) + 2px);
  background: transparent;
  border: 2px solid transparent;
  pointer-events: none;
  transition: all 0.25s ease-in-out;
  z-index: -1;
}

.glass-card:hover {
  box-shadow: var(--app-shadow-hover);
}

.glass-card:hover::after {
  border-color: rgba(var(--el-color-primary-rgb), 0.3);
  box-shadow: 0 0 10px 2px rgba(var(--el-color-primary-rgb), 0.2);
}

/* 暗黑模式卡片样式 */
.dark-mode .glass-card {
  background: rgba(35, 35, 35, 0.8);
  border-color: rgba(80, 80, 80, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .glass-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Element Plus卡片覆盖 */
.el-card {
  background: var(--app-gradient-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--app-border-color);
  box-shadow: var(--app-shadow-light);
  border-radius: var(--app-radius-sm);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.el-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--app-shadow-hover);
}

.el-card .el-card__header {
  padding: var(--app-spacing-md);
  border-bottom: 1px solid var(--app-border-color);
  font-weight: 500;
  color: var(--app-text-primary);
}

.el-card .el-card__body {
  padding: var(--app-spacing-md);
  color: var(--app-text-regular);
}

/* 暗色模式下卡片样式 */
.dark-mode .el-card {
  background: rgba(35, 35, 35, 0.8);
  border-color: rgba(80, 80, 80, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .el-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.dark-mode .el-card .el-card__header {
  border-bottom-color: rgba(80, 80, 80, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
}

/* 禁用Element Plus卡片的默认hover效果 */
.el-card.is-hover-shadow:hover {
  transform: translateY(-3px);
}

/* 功能卡片样式 */
.feature-card {
  display: flex;
  align-items: flex-start;
  gap: var(--app-spacing-md);
  padding: var(--app-spacing-md);
  border-radius: var(--app-radius-md);
  background: var(--app-gradient-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--app-border-color);
  box-shadow: var(--app-shadow-light);
  transition: var(--app-transition-normal);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--app-shadow-hover);
  border-color: rgba(var(--el-color-primary-rgb), 0.1);
}

/* 消息卡片样式 */
.message-card {
  flex: 1 1 calc(50% - var(--app-spacing-base));
  min-width: 200px;
  padding: var(--app-spacing-md);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--app-transition-normal);
  background: var(--app-gradient-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--app-border-color);
  box-shadow: var(--app-shadow-light);
  border-radius: var(--app-radius-sm);
}

.message-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--app-shadow-hover);
}

/* 信息卡片样式 */
.info-card {
  padding: var(--app-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--app-spacing-md);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--app-primary-light);
  color: var(--el-color-primary);
}

.card-data {
  display: flex;
  flex-direction: column;
}

.card-value {
  font-size: var(--app-font-size-xl);
  font-weight: 600;
  color: var(--app-text-primary);
}

.card-label {
  font-size: var(--app-font-size-sm);
  color: var(--app-text-secondary);
}
